<!DOCTYPE html>
<html>
<head>
    <title>基本材质</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/three.js"></script>
    <script>
        /* 材质
        *   MeshLambertMaterial(opt)
        *   visible:是否可见，默认为true
        *   side:渲染面片正面或反面，默认为正面THREE.FrontSide,可设置为反面THREE。BackSide,或双面THREE.DoubleSide
        *   wireframe:是否显示渲染线而非面，默认false
        *   color:十六进制RGB颜色
        *   map:使用纹理贴图
        * */
        function init(){
            var renderer = new THREE.WebGLRenderer({
                canvas:document.getElementById('mainCanvas')
            });
            renderer.setClearColor(0x000000);
            var scene = new THREE.Scene();

            var camera = new THREE.OrthographicCamera(-5,5,3.75,-3.75,0.1,100);
            camera.position.set(25,25,25);
            camera.lookAt(new THREE.Vector3(0,0,0));
            scene.add(camera);

            //光源
            var light = new THREE.PointLight(0xfffff,1,100);
            light.position.set(10,15,5);
            scene.add(light);

            var material = new THREE.MeshBasicMaterial({
                color:0xffff00,
                opacity:0.75
            });

            var cube = new THREE.Mesh(new THREE.CubeGeometry(5,5,5),material);
            scene.add(cube);

            renderer.render(scene,camera);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" style="width: 400px;height:300px;"></canvas>
</body>
</html>